// 声明变量
var CANVAS_WIGHT;
var CANVAS_HEIGHT;
var MAX_NUM;
var sPoint;
var ePoint;
var sPointStyle;
var nPoints = [];
var analyticals = [];
var clickType;
var routeReady;
var ctx;
var distanceMatrix;
var parentMatrix;
var minRoutes = [];
var wayStyle;

window.onload = function() {
	// 初始化数据
	initial();
	// 初始化画布
	var canvas = document.getElementById('canvas');
	ctx = canvas.getContext('2d');
	canvas.width = CANVAS_WIGHT;
	canvas.height = CANVAS_HEIGHT;
	ctx.save();
	// 第一次渲染
	render(ctx);
	// 计算所有解析式
	getAllAnalytical();
	// 计算拐点生成的矩阵
	getAllPointsDistanceMatrix();
	// 监听点击事件
	canvas.addEventListener("click", function(event) {
		getMousePos(canvas, event);
		render(ctx);
	});
}

function initial() {
	CANVAS_WIGHT = 1000;
	CANVAS_HEIGHT = 500;
	MAX_NUM = 999999999;
	sPoint = TypePoint.createNew();
	sPointStyle = {
		"color": "#00ff00",
		"r": 10
	};
	ePoint = TypePoint.createNew();
	ePointStyle = {
		"color": "#29e4fa",
		"r": 10
	};
	wayStyle = {
		"color":"#da02ff",
		"lineWidth":6
	}
	clickType = 0; //点击效果：0、无效果；1、设定起点；2、设定终点
	routeReady = false; //路线是否可以生成
}

// 鼠标点击事件
function getMousePos(canvas, event) {
	var rect = canvas.getBoundingClientRect();
	var x = event.clientX - rect.left * (canvas.width / rect.width);
	var y = event.clientY - rect.top * (canvas.height / rect.height);
	if(clickType == 1) {
		sPoint = TypePoint.createNew(x.toFixed(2) * 1, y.toFixed(2) * 1, 1);
		getNearPoint();
		getSPoint();
	} else if(clickType == 2) {
		ePoint = TypePoint.createNew(x.toFixed(2) * 1, y.toFixed(2) * 1, 2);
	}
}

// 渲染画布
function render(ctx) {
	ctx.restore();
	// 重置画布
	ctx.clearRect(0, 0, CANVAS_WIGHT, CANVAS_HEIGHT);
	// 渲染背景
	drawBg(ctx);
	// 渲染起点
	drawPoint(ctx, sPoint);
	// 渲染终点
	drawPoint(ctx, ePoint);
	// 画路线
	drawRoute(ctx);
}

// 更新html标签的内容
function updateSpan(select, content) {
	$(select).text(content);
}

// 选择起点和终点的按钮点击事件
function updateClickType(i) {
	clickType = i;
}

// 生成路线
function createRoute() {
	if(sPoint.type != 0 && ePoint.type != 0) {
		updateClickType(0);
		minRoutes = createMinRoute(sPoint, ePoint);
		routeReady = true;
	}
	render(ctx);
}

function createMinRoute(start, end) {
	// 起点到拐点
	// 离起点最近的路线
	var sVerticalPoints = getVerticalPoint(start, getMinWay(start));
	// 路线的两个拐点
	var sInflectionPoints = getInflectionPoint(sVerticalPoints);
	// 拐点到终点
	// 离终点最近的路线
	var eVerticalPoints = getVerticalPoint(end, getMinWay(end));
	// 路线的两个拐点
	var eInflectionPoints = getInflectionPoint(eVerticalPoints);
	// 计算拐点到拐点
	return getMinRoute(sInflectionPoints, eInflectionPoints);
}

function getMinRoute(sList, eList) {
	// 确定初始拐点和目标拐点
	var list = [];
	for(let i = 0; i < sList.length; i++) {
		for(let j = 0; j < eList.length; j++) {
			var a = checkInflectionPointsId(sList[i]) - 1;
			var b = checkInflectionPointsId(eList[j]) - 1;
			d = distanceMatrix[a][b];
			var one = {
				"i": i,
				"j": j,
				"a": a,
				"b": b,
				"d": d * 1 + sList[i].d * 1 + eList[j].d * 1
			};
			list.push(one);
		}
	}
	list.sort(function(a, b) {
		return a.d - b.d;
	});
	var min = list[0];
	// 计算路线
	var sIP = sList[min.i]; //起始拐点
	var eIP = eList[min.j]; //目标拐点
	var sVP = sIP.pre; //起始垂点
	var eVP = eIP.pre; //目标垂点
	var I2I = getRouteFromMatrix(min.a, min.b);
	return getTotalRoute(sVP,eVP,I2I);
}

// 拼接所有路线生成坐标数组
function getTotalRoute(svp,evp,i2i){
	var result = [];
	for (let i = 0; i < i2i.length; i++) {
		var temp = inflectionPoint[i2i[i]];
		var point = Point.createNew(temp.x*1,temp.y*1);
		result.push(point);
	}
	result.push(svp);
	result.reverse();
	result.push(evp);
	return result;
}

// 计算初始拐点到结束拐点的路线
function getRouteFromMatrix(start, end) {
	var bo = true;
	var result = [];
	var i = start * 1;
	var j = end * 1
	var temp = 0;
	result.push(j);
	while(bo){
		if (parentMatrix[i][j]!=0) {
			j = parentMatrix[i][j];
			result.push(j);
		} else{
			result.push(start);
			bo = false;
		}	
	}
	return result;
}

// 根据值确定点的ID
function checkInflectionPointsId(point) {
	for(let i = 0; i < inflectionPoint.length; i++) {
		if(point.x == inflectionPoint[i].x && point.y == inflectionPoint[i].y) {
			return inflectionPoint[i].id;
		}
	}
}